<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>01 vue初识</title>
    </head>
    <body>
        <!-- html是mvvm中的 v-view -->
        <div id="app">
            <p>{{ msg1 }}</p>
            <p v-text="msg2">默认数据</p>
            <!-- 不建议使用，有安全问题 -->
            <p v-html="msg3"></p>
            <p v-show="isShow">指令动态控制显示和隐藏节点</p>
            <p v-if="isCreated">指令动态控制创建和删除节点</p>
        </div>

        <script>
            //当导入vue.js后浏览器的内存中就有了一个 Vue 构造函数
            //vm对象是mvvm中的 vm-viewModle
            const vm = new Vue({
                el: '#app', //vue渲染的dom节点
                //data是mvvm中的 m-modle
                data: {
                    msg1: '哈喽 Vue！',
                    msg2: 'v-text指令显示',
                    msg3: '<h2>v-html指令显示</h2>',
                    isShow: false,
                    isCreated: false
                }
            });
        </script>
    </body>
</html>
